<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../jquery-1.11.3.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			div {
				width: 666px;
				margin: 100px auto;
				box-shadow: 0 0 5px #333;
				position: relative;
				height: 393px;
				overflow: hidden;
			}
			
			ul {
				position: relative;
				top: 0;
				left: 0;
			}
			
			ul li {
				position: absolute;
				top: 0;
				left: 666px;
			}
			ul li.activePic{
				left: 0;
			}
			img {
				width: 666px;
				display: block;
				
			}
			
			ol {
				overflow: hidden;
				margin: 0 auto;
				width: 260px;
				position: relative;
				top: 340px;
				z-index: 1;
			}
			
			ol li {
				float: left;
				margin: 10px;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: #E0FFFF;
				cursor: pointer;
			}
			
			.active {
				background: orangered;
			}
			
			p {
				position: absolute;
				font: 700 80px/100px "";
				color: #FFFFFF;
				top: 120px;
				display: none;
				cursor: pointer;
			}
			
			#left {
				left: 15px;
			}
			
			#right {
				right: 15px;
			}
		</style>
	</head>

	<body>
		<div>
			<ul>
				<li class="activePic"><img src="../img/Akali.jpg" /></li>
				<li><img src="../img/Anivia.jpg" /></li>
				<li><img src="../img/Blitzcrank_Splash_4.jpg" /></li>
				<li><img src="../img/Brand_Splash_0.jpg" /></li>
				<li><img src="../img/Caitlyn_Splash_4.jpg" /></li>
				<li><img src="../img/LeeSin.jpg" /></li>
			</ul>
			<ol>
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
			<p id="left">&lt;</p>
			<p id="right">&gt;</p>
		</div>
		<script>
			var $num = 0;
			var $btns = $("ol li")
			$("ol li").on("click",function(){
				var $index = $(this).index()
				$btns.removeClass("active")
				$btns.eq($index).addClass("active")
				if($index>$num){
					$("ul li").eq($index).css("left",666).animate({left:0})
					$("ul li").eq($num).animate({left:-666})
					$num = $index
				}else if($index<$num){
					$("ul li").eq($index).css("left",-666).animate({left:0})
					$("ul li").eq($num).animate({left:666})
					$num = $index
				}
			})
			$("div").hover(function(){
				$("p").stop(true,true).fadeIn()
			},function(){
				$("p").stop(true,true).fadeOut()
			})
			$("#left").on("click",function(){
				if($num!=0){
					var $index = $num-1
				}else{
					var $index = 5
				}
				$btns.removeClass("active")
				$btns.eq($index).addClass("active")
				$("ul li").eq($index).css("left",-666).animate({left:0})
				$("ul li").eq($num).animate({left:666})
				$num = $index
			})
			$("#right").on("click",function(){
				if($num!=5){
					var $index = $num+1
				}else{
					var $index = 0
				}
				$btns.removeClass("active")
				$btns.eq($index).addClass("active")
				$("ul li").eq($index).css("left",666).animate({left:0})
				$("ul li").eq($num).animate({left:-666})
				$num = $index
			})
			setInterval(function(){
				$("#right").click()
			},3000)
		</script>
	</body>

</html>
